<#escape x as x?html>
<div class="main">
    <div class="box box-solid box-fusion no-shadow no-border">
        <div class="box-header">
            <h3 class="pull-left" style="margin: 0 0 0 -15px">
                横幅广告
            </h3>
            <div class="box-tools pull-right" style="margin-top: 10px;">
                <@y.htmlFuzzySearchListForm/>
            </div>
        </div><!-- /.box-header -->
        <div class="box-body table-responsive no-padding">
            <table class="table table-inner-bordered table-hover"
                   data-form-name="横幅广告">
                <thead>
                <th class="col-md-2 col-lg-2">
                    名称
                </th>
                <th class="col-md-2 col-lg-2">
                    应用
                </th>
                <th class="col-md-2 col-lg-2">
                    排序
                </th>
                <th class="col-md-2 col-lg-2">
                    创建时间
                </th>
                <th class="col-md-2 col-lg-2">
                    更新时间
                </th>
                <th class="col-md-2 col-lg-2">
                    <@s.message "page.handler"/>
                </th>
                </thead>
                <tbody>
                    <#if (page.entities??)&&(page.entities?size>0)>
                        <#list page.entities as record>
                        <tr record-id='${record.id}'>
                            <td>${record.name!''}</td>
                            <td>${record.applications?size}</td>
                            <td>${record.sort!''}</td>
                            <td>${record.createTime!''}</td>
                            <td>${record.updateTime!''}</td>
                            <td class="popup-close table-btn" style="padding-left: 10px;">
                                <div class="btn-group no-padding">
                                    <@y.htmlPageBtnGroupEditDelete/>
                                </div>
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>
        </div><!-- /.box-body -->
    </div><!-- /.box -->
    <@y.htmlModal type="save"/>

    <div style="border-bottom: 1px solid #ccc">
        <h3 class="box-title">常用应用</h3>
        <div class="pull-right add-btn" style="margin-top: 20px" onclick="selectApp(true)"><i class="fa fa-plus"> 添加</i>
        </div>
        <div class="clearfix"></div>
    </div>
    <div style="margin-top: 10px; padding: 0 20px">
        <div id="commonApp" class="modelDragsort dragsort row" style="padding: 10px;">
            <#list commonApps as app>
                <div class="col-md-2">
                    <div class="common app" app-id="${app.id}">
                        <div class="zero-clipboard"><span class="btn-clipboard">X</span></div>
                        <img src="/resource/app/${app.logoFile!"app_default.png"}" alt="APP"
                             style="border-radius: 0;padding-top: 5px;">
                        <a class="users-list-name" style="margin-top: 10px; cursor: pointer;">${app.name}</a>
                        <span class="users-list-date" style="margin-top: 5px;margin-bottom:5px">${app.version}</span>
                    </div>
                </div>
            </#list>
        </div>
    </div>

    <div style="border-bottom: 1px solid #ccc">
        <h3 class="box-title">推荐应用</h3>
        <div class="pull-right add-btn" style="margin-top: 20px" onclick="selectApp(false)"><i class="fa fa-plus">
            添加</i>
        </div>
        <div class="clearfix"></div>
    </div>
    <div style="margin-top: 10px; padding: 0 20px">
        <div id="recommendApp" class="modelDragsort dragsort row" style="padding: 10px;">
            <#list recommendApps as app>
                <div class="col-md-2">
                    <div class="recommend app" app-id="${app.id}">
                        <div class="zero-clipboard"><span class="btn-clipboard">X</span></div>
                        <img src="/resource/app/${app.logoFile!"app_default.png"}" alt="APP"
                             style="border-radius: 0;padding-top: 5px;">
                        <a class="users-list-name" style="margin-top: 10px; cursor: pointer;">${app.name}</a>
                        <span class="users-list-date" style="margin-top: 5px;margin-bottom:5px">${app.version}</span>
                    </div>
                </div>
            </#list>
        </div>
    </div>
</div>
<script>
    context.call([
        "core", "list", "jQueryDragSort",
    ], function (core, list) {
        list.initFuzzySearchList("/sys/appView", {urlInsert: "insertBanner", urlUpdate: "updateBanner"});

        initDrag("#commonApp", "/sys/appView/resortCommonApplication");
        $(".common .zero-clipboard").click(function () {
            $.get("/sys/appView/delCommonApplication?id=" + $(this).parent().attr("app-id"), function () {
                core.loadContentWithAngular("/sys/appView/list");
            });
        });

        initDrag("#recommendApp", "/sys/appView/resortRecommendApplication");
        $(".recommend .zero-clipboard").click(function () {
            $.get("/sys/appView/delRecommendApplication?id=" + $(this).parent().attr("app-id"), function () {
                core.loadContentWithAngular("/sys/appView/list");
            });
        });

        $.each($(".app"), function () {
            $(this).children().first().hide();
            $(this).mouseenter(function () {
                $(this).children().first().show();
            });
            $(this).mouseleave(function () {
                $(this).children().first().hide();
            });
        })
    })

    function initDrag(e, url) {
        $(e).dragsort({
            dragSelector: "div.app",      //容器拖动手柄
            dragEnd: function () {
                var apps = $.map($(this).parent().children(), function (e) {
                    return $(e).children().first().attr("app-id");
                }).join(",");
                console.log(apps);
                $.post(url, {applications: apps});
            },                   //执行之后的回调函数
            //dragSelectorExclude: "",     //指定不会执行动作的元素
            placeHolderTemplate: "<div class='col-md-2' style='border: 1px dotted #ccc; margin: 0 15px'><div></div></div>",     //拖动列表的HTML部分
            scrollSpeed: 15            //拖动速度
        });
    }

    function selectApp(common) {
        context.call([
            "core"
        ], function (core) {
            core.showForm("#modal", {
                formUrl: "/sys/appView/selectApp?type=" + ( common ? "CommonApplication" : "RecommendApplication"),
                postUrl: "/sys/appView/update" + (common ? "CommonApplication" : "RecommendApplication"),
                successUrl: "/sys/appView/list",
                formTitle: "选择应用"
            });
        });
    }
</script>
<style>
    .box-title {
        float: left;
    }

    .add-btn {
        font-size: 12px;
        padding: 5px 10px;
        cursor: pointer;
    }

    .add-btn:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .modelDragsort {
        background-color: white;
    }

    .app {
        padding: 10px 10px;
        background-color: transparent;
        cursor: pointer;
        text-align: center;
        margin: 0 auto;
    }

    .app:hover {
        background-color: #ddd;
    }

    .zero-clipboard .btn-clipboard {
        right: 15px;
        border-top-right-radius: 0;
    }

    .btn-clipboard {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        display: block;
        padding: 5px 8px;
        font-size: 12px;
        color: #777;
        cursor: pointer;
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-radius: 0 4px 0 4px;
    }
</style>
</#escape>